<template>
  <div class="mock-exam-view">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">模拟考试</h1>
      <div class="header-description">
        通过模拟考试检验学习成果，熟悉考试流程，提高应试能力
      </div>
    </div>

    <!-- 考试类型选择 -->
    <el-card class="exam-type-card">
      <div class="exam-type-header">
        <h2>选择考试类型</h2>
        <p>根据您的学习需求，选择适合的考试类型</p>
      </div>
      
      <div class="exam-type-grid">
        <el-card class="exam-type-item" @click="startExam('full')">
          <div class="exam-type-icon">
            <el-icon><BookOpen /></el-icon>
          </div>
          <div class="exam-type-info">
            <h3>全真模拟考试</h3>
            <p>完整135道题目，严格按照考试时间进行</p>
            <div class="exam-type-meta">
              <span>135题</span>
              <span>120分钟</span>
            </div>
          </div>
        </el-card>
        
        <el-card class="exam-type-item" @click="startExam('half')">
          <div class="exam-type-icon">
            <el-icon><FileText /></el-icon>
          </div>
          <div class="exam-type-info">
            <h3>专项模拟考试</h3>
            <p>根据科目选择，针对性练习薄弱环节</p>
            <div class="exam-type-meta">
              <span>50题</span>
              <span>60分钟</span>
            </div>
          </div>
        </el-card>
        
        <el-card class="exam-type-item" @click="startExam('quick')">
          <div class="exam-type-icon">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="exam-type-info">
            <h3>快速练习</h3>
            <p>短时间内完成少量题目，巩固知识点</p>
            <div class="exam-type-meta">
              <span>20题</span>
              <span>20分钟</span>
            </div>
          </div>
        </el-card>
        
        <el-card class="exam-type-item" @click="startExam('custom')">
          <div class="exam-type-icon">
            <el-icon><Setting /></el-icon>
          </div>
          <div class="exam-type-info">
            <h3>自定义考试</h3>
            <p>根据您的需求自定义题目数量和类型</p>
            <div class="exam-type-meta">
              <span>自定义</span>
              <span>自定义</span>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>

    <!-- 考试倒计时 -->
    <el-card v-if="examStatus === 'in-progress'" class="exam-countdown-card">
      <div class="countdown-header">
        <h2>当前考试</h2>
        <el-button danger @click="confirmEndExam">结束考试</el-button>
      </div>
      
      <div class="countdown-content">
        <div class="countdown-timer">
          <div class="timer-label">剩余时间</div>
          <div class="timer-display">{{ formattedTime }}</div>
        </div>
        
        <div class="countdown-stats">
          <div class="countdown-stat">
            <span class="stat-number">{{ totalQuestions }}</span>
            <span class="stat-label">总题数</span>
          </div>
          <div class="countdown-stat">
            <span class="stat-number">{{ answeredQuestions }}</span>
            <span class="stat-label">已答</span>
          </div>
          <div class="countdown-stat">
            <span class="stat-number">{{ unansweredQuestions }}</span>
            <span class="stat-label">未答</span>
          </div>
          <div class="countdown-stat">
            <span class="stat-number">{{ markedQuestions }}</span>
            <span class="stat-label">已标记</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 考试进行中内容 -->
    <div v-if="examStatus === 'in-progress'" class="exam-in-progress">
      <!-- 题目导航 -->
      <div class="question-navigation">
        <div class="navigation-header">
          <h3>题目导航</h3>
          <div class="navigation-legend">
            <div class="legend-item">
              <span class="legend-dot answered"></span>
              <span>已答</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot unanswered"></span>
              <span>未答</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot marked"></span>
              <span>已标记</span>
            </div>
          </div>
        </div>
        
        <div class="question-grid">
          <button
            v-for="(question, index) in currentExam.questions"
            :key="index"
            :class="[
              'question-button',
              { 'answered': question.answer !== null },
              { 'marked': question.marked },
              { 'current': currentQuestionIndex === index }
            ]"
            @click="goToQuestion(index)"
          >
            {{ index + 1 }}
            <span v-if="question.marked" class="mark-icon">★</span>
          </button>
        </div>
      </div>

      <!-- 题目内容 -->
      <div class="question-content">
        <div v-if="currentQuestion" class="question-display">
          <div class="question-header">
            <div class="question-number">第 {{ currentQuestionIndex + 1 }} 题（共 {{ totalQuestions }} 题）</div>
            <div class="question-type">{{ getQuestionTypeName(currentQuestion.type) }}</div>
          </div>
          
          <div class="question-text">
            {{ currentQuestion.text }}
          </div>
          
          <div v-if="currentQuestion.imageUrl" class="question-image">
            <img :src="currentQuestion.imageUrl" alt="题目图片" />
          </div>
          
          <div class="question-options">
            <div
              v-for="(option, key) in currentQuestion.options"
              :key="key"
              :class="[
                'option-item',
                { 'selected': currentQuestion.answer === key }
              ]"
              @click="selectAnswer(key)"
            >
              <div class="option-label">{{ key }}</div>
              <div class="option-text">{{ option }}</div>
            </div>
          </div>
          
          <div class="question-actions">
            <el-button @click="toggleMarkQuestion">
              <el-icon v-if="currentQuestion.marked"><StarFilled /></el-icon>
              <el-icon v-else><Star /></el-icon>
              {{ currentQuestion.marked ? '取消标记' : '标记此题' }}
            </el-button>
            
            <div class="navigation-buttons">
              <el-button 
                @click="previousQuestion"
                :disabled="currentQuestionIndex === 0"
              >
                上一题
              </el-button>
              <el-button 
                type="primary"
                @click="nextQuestion"
                :disabled="currentQuestionIndex === totalQuestions - 1"
              >
                下一题
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 自定义考试对话框 -->
    <el-dialog
      v-model="customExamDialogVisible"
      title="自定义考试"
      width="600px"
    >
      <div class="custom-exam-form">
        <el-form :model="customExamForm" label-width="120px">
          <el-form-item label="考试时长">
            <el-input-number
              v-model="customExamForm.duration"
              :min="10"
              :max="180"
              label="分钟"
            />
            <span style="margin-left: 10px;">分钟</span>
          </el-form-item>
          
          <el-form-item label="总题数">
            <el-input-number
              v-model="customExamForm.totalQuestions"
              :min="5"
              :max="200"
              label="题"
            />
            <span style="margin-left: 10px;">题</span>
          </el-form-item>
          
          <el-form-item label="题目类型">
            <el-checkbox-group v-model="customExamForm.questionTypes">
              <el-checkbox label="graphic">图形推理</el-checkbox>
              <el-checkbox label="definition">定义判断</el-checkbox>
              <el-checkbox label="analogy">类比推理</el-checkbox>
              <el-checkbox label="logic">逻辑判断</el-checkbox>
              <el-checkbox label="language">言语理解</el-checkbox>
              <el-checkbox label="quantity">数量关系</el-checkbox>
              <el-checkbox label="data">资料分析</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          
          <el-form-item label="难度等级">
            <el-slider
              v-model="customExamForm.difficulty"
              :min="1"
              :max="5"
              show-input
            />
            <span style="margin-left: 10px;">1-简单，5-困难</span>
          </el-form-item>
          
          <el-form-item label="题目来源">
            <el-radio-group v-model="customExamForm.source">
              <el-radio label="all">全部来源</el-radio>
              <el-radio label="national">国考真题</el-radio>
              <el-radio label="provincial">省考真题</el-radio>
              <el-radio label="simulation">模拟题</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="customExamDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCustomExam">开始考试</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 考试开始确认对话框 -->
    <el-dialog
      v-model="startExamConfirmDialogVisible"
      title="确认开始考试"
      width="500px"
    >
      <div class="start-exam-confirm">
        <div class="confirm-info">
          <p><strong>考试类型：</strong>{{ examTypeConfig.name }}</p>
          <p><strong>题目数量：</strong>{{ examTypeConfig.questions }}题</p>
          <p><strong>考试时长：</strong>{{ examTypeConfig.duration }}分钟</p>
        </div>
        <div class="confirm-notice">
          <p>⚠️ 考试开始后，请保持专注，不要刷新页面或关闭浏览器窗口。</p>
          <p>⚠️ 考试时间结束后，系统将自动提交您的答案。</p>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="startExamConfirmDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmStartExam">确认开始</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 考试结束确认对话框 -->
    <el-dialog
      v-model="endExamConfirmDialogVisible"
      title="确认结束考试"
      width="500px"
    >
      <div class="end-exam-confirm">
        <p>您确定要结束当前考试吗？</p>
        <p>结束后将无法继续答题，系统会自动为您提交已答题目。</p>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="endExamConfirmDialogVisible = false">继续答题</el-button>
          <el-button type="danger" @click="submitExam">确认结束</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 导入图标
import {
  Clock,
  Setting
} from '@element-plus/icons-vue'

// 路由
const router = useRouter()

// 响应式数据
const examStatus = ref<'not-started' | 'in-progress' | 'finished'>('not-started')
const selectedExamType = ref<string>('')
const customExamDialogVisible = ref(false)
const startExamConfirmDialogVisible = ref(false)
const endExamConfirmDialogVisible = ref(false)

// 自定义考试表单数据
const customExamForm = reactive({
  duration: 60,
  totalQuestions: 50,
  questionTypes: ['graphic', 'definition', 'analogy', 'logic', 'language', 'quantity', 'data'],
  difficulty: 3,
  source: 'all'
})

// 考试配置
const examTypeConfig = ref({
  name: '',
  questions: 0,
  duration: 0
})

// 当前考试数据
const currentExam = ref({
  id: '',
  type: '',
  startTime: new Date(),
  endTime: new Date(),
  remainingTime: 0,
  questions: [] as Question[]
})

// 当前题目索引
const currentQuestionIndex = ref(0)

// 计时器
let timer: number | null = null

// 题目接口
interface Question {
  id: string
  type: string
  text: string
  options: Record<string, string>
  answer: string | null
  marked: boolean
  imageUrl?: string
}

// 考试类型配置
const examTypes: Record<string, { name: string; questions: number; duration: number }> = {
  full: { name: '全真模拟考试', questions: 135, duration: 120 },
  half: { name: '专项模拟考试', questions: 50, duration: 60 },
  quick: { name: '快速练习', questions: 20, duration: 20 }
}

// 计算属性：当前题目
const currentQuestion = computed(() => {
  return currentExam.value.questions[currentQuestionIndex.value]
})

// 计算属性：总题数
const totalQuestions = computed(() => {
  return currentExam.value.questions.length
})

// 计算属性：已答题数
const answeredQuestions = computed(() => {
  return currentExam.value.questions.filter(q => q.answer !== null).length
})

// 计算属性：未答题数
const unansweredQuestions = computed(() => {
  return totalQuestions.value - answeredQuestions.value
})

// 计算属性：已标记题数
const markedQuestions = computed(() => {
  return currentExam.value.questions.filter(q => q.marked).length
})

// 计算属性：格式化的剩余时间
const formattedTime = computed(() => {
  const minutes = Math.floor(currentExam.value.remainingTime / 60)
  const seconds = currentExam.value.remainingTime % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

// 获取题目类型名称
const getQuestionTypeName = (type: string) => {
  const typeMap: Record<string, string> = {
    graphic: '图形推理',
    definition: '定义判断',
    analogy: '类比推理',
    logic: '逻辑判断',
    language: '言语理解',
    quantity: '数量关系',
    data: '资料分析'
  }
  return typeMap[type] || type
}

// 开始考试
const startExam = (type: string) => {
  selectedExamType.value = type
  
  if (type === 'custom') {
    customExamDialogVisible.value = true
  } else {
    examTypeConfig.value = examTypes[type]
    startExamConfirmDialogVisible.value = true
  }
}

// 确认自定义考试
const confirmCustomExam = () => {
  if (customExamForm.questionTypes.length === 0) {
    ElMessage.error('请至少选择一种题目类型')
    return
  }
  
  examTypeConfig.value = {
    name: '自定义考试',
    questions: customExamForm.totalQuestions,
    duration: customExamForm.duration
  }
  
  customExamDialogVisible.value = false
  startExamConfirmDialogVisible.value = true
}

// 确认开始考试
const confirmStartExam = () => {
  // 生成模拟题目
  generateMockQuestions()
  
  // 设置考试状态
  examStatus.value = 'in-progress'
  currentQuestionIndex.value = 0
  
  // 设置考试时间
  const now = new Date()
  currentExam.value.startTime = now
  currentExam.value.endTime = new Date(now.getTime() + examTypeConfig.value.duration * 60 * 1000)
  currentExam.value.remainingTime = examTypeConfig.value.duration * 60
  
  // 开始计时器
  startTimer()
  
  // 关闭对话框
  startExamConfirmDialogVisible.value = false
  
  ElMessage.success(`考试开始！您有 ${examTypeConfig.value.duration} 分钟时间完成考试`)
}

// 确认结束考试
const confirmEndExam = () => {
  endExamConfirmDialogVisible.value = true
}

// 提交考试
const submitExam = () => {
  // 停止计时器
  stopTimer()
  
  // 设置考试状态
  examStatus.value = 'finished'
  
  // 关闭对话框
  endExamConfirmDialogVisible.value = false
  
  // 跳转到结果分析页面
  router.push({
    name: 'ResultAnalysis',
    params: {
      examId: currentExam.value.id,
      score: calculateScore()
    }
  })
}

// 生成模拟题目
const generateMockQuestions = () => {
  const questions: Question[] = []
  const types = selectedExamType.value === 'custom' ? customExamForm.questionTypes : ['graphic', 'definition', 'analogy', 'logic', 'language', 'quantity', 'data']
  const total = examTypeConfig.value.questions
  
  // 根据配置生成模拟题目
  for (let i = 0; i < total; i++) {
    // 随机选择题目类型
    const type = types[Math.floor(Math.random() * types.length)]
    
    // 根据类型生成不同的题目
    let text = ''
    let options: Record<string, string> = {}
    
    switch (type) {
      case 'graphic':
        text = '从所给的四个选项中，选择最合适的一个填入问号处，使之呈现一定的规律性。\n图形序列略...'
        options = {
          'A': '选项A',
          'B': '选项B',
          'C': '选项C',
          'D': '选项D'
        }
        break
      case 'definition':
        text = '犯罪中止是指在犯罪过程中，自动放弃犯罪或者自动有效地防止犯罪结果发生的行为。下列属于犯罪中止的是？'
        options = {
          'A': '甲在盗窃时被人发现，夺路而逃',
          'B': '乙在杀人后，因害怕法律制裁，主动到公安机关自首',
          'C': '丙在投毒后，良心发现，及时送被害人到医院抢救，被害人脱离危险',
          'D': '丁在抢劫时，被被害人认出，被迫停止犯罪'
        }
        break
      case 'analogy':
        text = '螺丝：螺帽\n下列选项中，与题干逻辑关系相同的是？'
        options = {
          'A': '水杯：杯盖',
          'B': '铅笔：橡皮',
          'C': '门锁：钥匙',
          'D': '汽车：轮胎'
        }
        break
      case 'logic':
        text = '如果所有的鸟都会飞，并且企鹅是鸟，那么企鹅会飞。从这个前提出发，需要加上下列哪一项前提，才能逻辑地推出“有些鸟不会飞”的结论？'
        options = {
          'A': '企鹅不会飞，并且企鹅是鸟',
          'B': '企鹅不会飞，并且企鹅不是鸟',
          'C': '企鹅会飞，并且企鹅是鸟',
          'D': '企鹅会飞，并且企鹅不是鸟'
        }
        break
      case 'language':
        text = '依次填入下列各句横线处的词语，最恰当的一组是：\n①经过精心的治疗和护理，病人已不再剧烈咳嗽、出冷汗、昏厥，病情有了好转的______。\n②他们职业各异，经历不同，甚至素未往来，但对于文学的______兴趣使他们一见如故。'
        options = {
          'A': '症候 同一',
          'B': '症候 统一',
          'C': '征候 同一',
          'D': '征候 统一'
        }
        break
      case 'quantity':
        text = '某单位组织员工去旅游，要求每辆汽车坐的人数相同。如果每辆车坐20人，还剩下2名员工；如果减少一辆汽车，员工正好可以平均分到每辆汽车。问该单位共有多少名员工？'
        options = {
          'A': '242',
          'B': '244',
          'C': '246',
          'D': '248'
        }
        break
      case 'data':
        text = '根据以下资料，回答问题。\n2023年上半年，某省社会消费品零售总额为1200亿元，同比增长15.2%。其中，限额以上企业消费品零售额为720亿元，同比增长18.5%。\n2022年上半年，该省限额以上企业消费品零售额占社会消费品零售总额的比重约为？'
        options = {
          'A': '58.2%',
          'B': '59.5%',
          'C': '60.3%',
          'D': '61.1%'
        }
        break
    }
    
    questions.push({
      id: `q-${i + 1}`,
      type,
      text,
      options,
      answer: null,
      marked: false
    })
  }
  
  currentExam.value = {
    id: `exam-${Date.now()}`,
    type: selectedExamType.value,
    startTime: new Date(),
    endTime: new Date(),
    remainingTime: 0,
    questions
  }
}

// 开始计时器
const startTimer = () => {
  if (timer) {
    clearInterval(timer)
  }
  
  timer = window.setInterval(() => {
    if (currentExam.value.remainingTime > 0) {
      currentExam.value.remainingTime--
    } else {
      // 时间到，自动提交
      ElMessage.warning('考试时间已结束，系统将自动提交您的答案')
      submitExam()
    }
  }, 1000)
}

// 停止计时器
const stopTimer = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

// 选择答案
const selectAnswer = (answer: string) => {
  if (currentQuestion.value) {
    currentQuestion.value.answer = answer
  }
}

// 切换标记题目
const toggleMarkQuestion = () => {
  if (currentQuestion.value) {
    currentQuestion.value.marked = !currentQuestion.value.marked
    ElMessage.success(currentQuestion.value.marked ? '已标记此题' : '已取消标记')
  }
}

// 上一题
const previousQuestion = () => {
  if (currentQuestionIndex.value > 0) {
    currentQuestionIndex.value--
  }
}

// 下一题
const nextQuestion = () => {
  if (currentQuestionIndex.value < totalQuestions.value - 1) {
    currentQuestionIndex.value++
  }
}

// 跳转到指定题目
const goToQuestion = (index: number) => {
  currentQuestionIndex.value = index
}

// 计算得分
const calculateScore = () => {
  // 这里只是模拟计算得分
  // 实际应用中应该根据正确答案进行计算
  const answered = answeredQuestions.value
  const score = Math.round((answered / totalQuestions.value) * 100)
  return score
}

// 组件挂载时初始化
onMounted(() => {
  // 可以在这里加载用户的考试历史记录或其他相关数据
})

// 组件卸载时清理
onUnmounted(() => {
  stopTimer()
})
</script>

<style lang="scss" scoped>
.mock-exam-view {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 10px 0;
}

.header-description {
  font-size: 16px;
  color: #6b7280;
}

.exam-type-card {
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
}

.exam-type-header {
  text-align: center;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.exam-type-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 10px 0;
}

.exam-type-header p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.exam-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 30px;
}

.exam-type-item {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  &:hover {
    border-color: #409eff;
    box-shadow: 0 4px 20px rgba(64, 158, 255, 0.15);
    transform: translateY(-5px);
  }
}

.exam-type-icon {
  font-size: 40px;
  color: #409eff;
  margin-bottom: 15px;
}

.exam-type-info h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.exam-type-info p {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 10px 0;
  line-height: 1.5;
}

.exam-type-meta {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: #409eff;
}

.exam-countdown-card {
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #f8fafc;
}

.countdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.countdown-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.countdown-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30px;
  flex-wrap: wrap;
  gap: 30px;
}

.countdown-timer {
  text-align: center;
}

.timer-label {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 10px;
}

.timer-display {
  font-size: 48px;
  font-weight: 700;
  color: #f56c6c;
  font-family: 'Courier New', monospace;
}

.countdown-stats {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.countdown-stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
}

.exam-in-progress {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
}

.question-navigation {
  background-color: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  height: fit-content;
  position: sticky;
  top: 20px;
}

.navigation-header {
  margin-bottom: 20px;
}

.navigation-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 10px 0;
}

.navigation-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #6b7280;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot.answered {
  background-color: #67c23a;
}

.legend-dot.unanswered {
  background-color: #f56c6c;
}

.legend-dot.marked {
  background-color: #e6a23c;
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.question-button {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  &:hover {
    border-color: #409eff;
    background-color: #ecf5ff;
  }
  &.answered {
    border-color: #67c23a;
    background-color: #f0f9eb;
  }
  &.unanswered {
    border-color: #f56c6c;
    background-color: #fef0f0;
  }
  &.marked {
    border-color: #e6a23c;
    background-color: #fdf6ec;
  }
  &.current {
    border-color: #409eff;
    background-color: #409eff;
    color: #ffffff;
    transform: scale(1.1);
    z-index: 1;
  }
}

.mark-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  color: #e6a23c;
  font-size: 12px;
}

.question-content {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 30px;
  min-height: 600px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.question-display {
  width: 100%;
  max-width: 800px;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.question-number {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.question-type {
  font-size: 14px;
  color: #409eff;
  background-color: #ecf5ff;
  padding: 4px 12px;
  border-radius: 16px;
}

.question-text {
  font-size: 18px;
  line-height: 1.8;
  color: #1f2937;
  margin-bottom: 30px;
  white-space: pre-wrap;
}

.question-image {
  margin-bottom: 30px;
  text-align: center;
}

.question-image img {
  max-width: 100%;
  border-radius: 8px;
}

.question-options {
  margin-bottom: 30px;
}

.option-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  &:hover {
    border-color: #409eff;
    background-color: #ecf5ff;
  }
  &.selected {
    border-color: #409eff;
    background-color: #ecf5ff;
  }
}

.option-label {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
  min-width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.option-text {
  font-size: 16px;
  line-height: 1.6;
  color: #4b5563;
}

.question-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.navigation-buttons {
  display: flex;
  gap: 15px;
}

.custom-exam-form {
  padding: 20px 0;
}

.start-exam-confirm,
.end-exam-confirm {
  padding: 20px 0;
}

.confirm-info {
  margin-bottom: 20px;
}

.confirm-info p {
  margin: 10px 0;
  font-size: 16px;
  color: #4b5563;
}

.confirm-notice {
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 8px;
  padding: 15px;
}

.confirm-notice p {
  margin: 8px 0;
  font-size: 14px;
  color: #f56c6c;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .exam-in-progress {
    grid-template-columns: 1fr;
  }
  
  .question-navigation {
    position: static;
  }
  
  .countdown-content {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .exam-type-grid {
    grid-template-columns: 1fr;
  }
  
  .question-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .question-actions {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .navigation-buttons {
    justify-content: center;
  }
}
</style>